<template>
	<div class="pop flex-jusa">
        <div class="box" v-loading="loading">
            <div class="clone" @click="clone"><p></p></div>
            <div class="top flex-ali">
                <div class="title"><div class="icon"></div>选择城市</div>
                <div class="el-checkbox-group" v-for="(city,index) in cityOptions" :key="index" @click="cityChange(index)">
                    <label class="el-checkbox">
                        <span class="el-checkbox__input" :class="zindex1==index?'is-checked':''">
                            <span class="el-checkbox__inner"></span>
                        </span>
                        <span class="el-checkbox__label">{{city.name}}</span>
                    </label>
                </div>
            </div>
            <div class="bottom flex">
                <div class="title">区域</div>
                <div class="el-checkbox-group">
                    <label class="el-checkbox bottom-el-checkbox"  v-for="(city,index) in areaOptions" :key="index" @click="areaChange(index)">
                        <span class="el-checkbox__input" :class="zindex2==index?'is-checked':''">
                            <span class="el-checkbox__inner"></span>
                        </span>
                        <span class="el-checkbox__label">{{city.name}}</span>
                    </label>

                </div>
            </div>
            <div class="btn" @click="alldata">确认</div>
        </div>
    </div>
</template>
<script>
import {filter_list} from '@/api/service/service'
export default {
	name:'pop',
	data() {
		return {
            zindex1:0,
            zindex2:0,
            cityOptions:[],
            areaOptions:[],
            loading:false
		}
    },
    mounted(){
        
    },
	created() {
        this.filterList()
	},
	methods:{
      alldata(){
          let ondata = [];
          ondata.push(this.cityOptions[this.zindex1].id)
          ondata.push(this.areaOptions[this.zindex2].id)
          this.$emit('alldata',ondata)
      },
      cityChange(i) {
        if(this.zindex1 != i){
            this.zindex1 = i;
            this.zindex2 = 0;
            this.areaOptions = this.cityOptions[i].children;
        }
        
      },
      areaChange(i){
        this.zindex2 = i;
      },
      clone(){
        this.$emit('popTog',false)
      },
      //获取地区
      filterList(){
          this.loading = true
        filter_list({data:'area'}).then(res => {
            this.loading =false
            
            for(let i=0; i<res.datas[0].children.length; i++){
                res.datas[0].children[i].children.unshift({
                    children:null,
                    code:"",
                    id:"",
                    name:"全部区",
                    parentCode:""
                })
            }
            this.cityOptions=res.datas[0].children;
            this.areaOptions = res.datas[0].children[this.zindex1].children
            // this.area = res.datas[0].children;

        }).catch(err => {
            console.log(err)
        });
      },
      cityChangea(index){
          
      }
            
  }
}
</script>
<style scoped="scoped">
.pop{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0,.3);
    z-index: 99;
}
.pop.clone{
    display: none;
}
.pop .box{
    position: relative;
    width: 646px;
    min-height: 100px;
    background: #fff;  
    box-shadow: 0px 2px 5px 1px rgba(41, 92, 115, 0.18);
    border-radius: 6px;
}
.pop .box .clone{
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ccc;
    border-radius: 50%;
}
.pop .box .clone p{
  position:relative;
  width:20px;
  height:20px;
}
.pop .box .clone p::after{
  content: "";
  position: absolute;
  top: 4px;
  left: 9px;
  width:2px;
  height:12px;
  background: #fff;
  transform: rotate(40deg);
}
.pop .box .clone p::before{
  content: "";
  position: absolute;
  top: 4px;
  left: 9px;
  width:2px;
  height:12px;
  background: #fff;
  transform: rotate(315deg);
}
.pop .box .top{
    padding: 22px 0 14px 0;
    border-bottom: 1px solid #C7C7C7;
}
.pop .box .top .title{
    padding-left: 48px;
    padding-right: 30px;
    font-size: 16px;
    position: relative;
    line-height: 25px;
    
}
.pop .box .top .title .icon{
    position: absolute;
    left: 14px;
    top: 0;
    width: 25px;
    height: 25px;
    background: url(../../../assets/policy/pop-icon.png) center center no-repeat;
    background-size: 100% 100%;
}
.pop .box .bottom{
    padding: 18px 0 0 48px;
}
.pop .box .bottom .title{
    width: 70px;
    font-size: 16px;
    line-height: 20px;
    padding-right: 35px;
    flex-grow:0;
flex-shrink:0;
}
.pop .box .btn{
    width: 170px;
    height: 32px;
    line-height: 32px;
    border-radius: 3px;
    margin: 0 auto 25px;
    background: #3DABC4;
    font-size: 16px;
    color: #fff;
    text-align: center;
    cursor:pointer
}
</style>
<style>
.el-checkbox-group{
    margin-right: 30px;
}
.el-checkbox-group.is-checked>.el-checkbox>.el-checkbox__input.el-checkbox__inner{
    background-color: #3C8394;
    border-color: #3C8394;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
background-color:#3C8394;
border-color: #3C8394;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
color: #3C8394;
}
.el-checkbox.is-bordered.is-checked{
border-color: #3C8394;
}
.el-checkbox__input.is-focus .el-checkbox__inner{
border-color: #3C8394;
}
.bottom-el-checkbox{
    margin-bottom: 24px;
}
</style>
